<template>
  <div class="home-header">
    <div class="left">
      <i class="iconfont icon-fanhui"></i>
    </div>
    <div class="search">
      <i class="iconfont icon-sousuo"></i>
      <span>输入城市/景点/游玩主题</span>
    </div>
    <div class="right" @click="toCity()">
      <span>
        {{cityName}}
        <i class="iconfont icon-xiajiantou"></i>
      </span>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["cityName"])
  },
  methods: {
    toCity() {
      this.$router.push("/city");
    }
  }
};
</script>


<style lang="stylus" scoped>
@import '~css/var.styl'

.home-header
  background $bgColor
  color $textColor
  font-size 0.28em
  height 0.88rem
  line-height 0.6rem
  display flex

  .left
    font-weight bolder
    font-size 0.36rem
    text-align left
    margin 0.11rem 0
    width 0.4rem
    padding 0 0.2rem

    .iconfont
      vertical-align middle

  .search
    flex 1
    background #fff
    color #e4e7ea
    line-height 0.6rem
    text-align left
    margin 0.14rem 0
    padding-left 0.2rem
    border-radius 0.1rem

  .right
    width 1rem
    margin 0.11rem
    padding-left 0.1rem

    .iconfont
      vertical-align middle
      font-size 0.26rem
</style>

